<template>
	<view class="container bg-main pos-r">
		<use-navbar title="注册"></use-navbar>

		<view class="padding-xl dflex-c dflex-flow-c">
			<view class="portrait-box margin-bottom">
				<image mode="aspectFit" class="headimg border-radius-c" src="https://img.shihuashengyi.cn/static/images/user/default.png"></image>
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconshouji margin-right"></view>
				<view class="flex1 dflex">
					<input class="border-line padding-sm flex1" type="number" data-key="mobile" maxlength="11"
						v-model="phoneNumber"placeholder="请输入手机号" />
				</view>
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconmima margin-right"></view>
				<input class="border-line padding-sm flex1" type="text" password data-key="password" maxlength="20"
					v-model="passwd" placeholder="请输入密码" />
			</view>

			<view class="w-full dflex padding-bottom-sm">
				<view class="iconfont iconyanzheng margin-right"></view>
				<view class="border-line flex1 dflex">
					<input class="padding-sm flex1" type="number" data-key="code" maxlength="6" v-model="code" placeholder="请输入验证码" />
					<view class="padding-tb-sm ft-base" @click="getCode">{{getCodeText}}</view>
				</view>
			</view>
			
			<view class="w-full dflex padding-bottom-sm" v-if="!have">
				<view class="iconfont iconshouji margin-right"></view>
				<input class="border-line padding-sm flex1" type="number" maxlength="11"
					v-model="phone" placeholder="请输入邀请人手机号(若无可不填)" />
			</view>
				<view @click="toLogin">已有账号立即登录</view>
			<!-- <view v-if="agreementDatas && agreementDatas.length > 0" class="dflex margin-top" @click="toAgreement">
				<view v-if="agreement" class="iconfont iconxuanzhongzhuangtai margin-right-xs ft-base"></view>
				<view v-else class="iconfont iconweixuanzhongzhuangtai margin-right-xs"></view>
				<view class="">
					已阅读并同意<text v-for="(item, idx) in agreementDatas" :key="idx" class="ft-base" @click.stop="toContent(item)">《{{item.name}}》</text>
				</view>
			</view>
 -->
			<view class="w-full margin-top-big">
				<view class="dflex-b border-radius-lg">
					<view class="tac padding-tb-sm flex1 bg-base fs" @click="doReg">立即{{have?"激活":"注册"}}</view>
				</view>
			</view>
		</view>

		<!-- 用云版权 -->
		<use-copyright class="pos-f w-full" style="bottom: -30rpx"></use-copyright>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	import {shop_register,get_code,shop_activate} from "@/js_sdk/apis/user.js"
	export default {
		data() {
			return {
				phoneNumber:"",
				phone:"",
				code:'',
				passwd:"",
				have:false,
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false
			}
		},
		onLoad({have}) {
			if(have){
				this.have=have
				uni.setNavigationBarTitle({
					title: "老用户激活"
				});
			}
		},
		methods: {
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				get_code({mobilePhone:this.phoneNumber}).then((res)=>{
					console.log(res)
					uni.showToast({title: '验证码已发送',icon:"none"});
					//示例默认1234，生产中请删除这一句。
					//his.code=1234;
					this.setTimer();
				}).catch(err=>{
					this.setTimer();
					uni.showToast({title:err.msg,icon:"none"});
				})
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReg(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(!this.code){ 
					uni.showToast({title: '验证码不正确',icon:"none"});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				let sendData={
						account:this.phoneNumber,
						captcha:this.code,
						password:md5(this.passwd),
						phone:this.phone
					}
				if(this.have){
					shop_activate(sendData).then(res=>{
						if(res.success){
							uni.hideLoading()
							uni.showToast({title: '激活成功',icon:"success"});
							setTimeout(function(){
								uni.navigateBack();
							},1000)
						}
					}).catch(err=>{
						uni.showToast({title: '激活失败',icon:"error"});
					})
				}else{
					shop_register(sendData).then(res=>{
						if(res.success){
							uni.hideLoading()
							uni.showToast({title: '注册成功',icon:"success"});
							setTimeout(function(){
								uni.navigateBack();
							},1000)
						}
					}).catch(err=>{
						uni.showToast({title: '注册失败',icon:"error"});
					})
				}
				
				
			},
			toLogin(){ 
				uni.hideKeyboard()
				uni.redirectTo({url: 'login'});
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}
	
	.container {
		padding-top: 5vh;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
	}
	
	.portrait-box {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}
</style>
